﻿@*******************************************************************************************************
//  Menus.cshtml - Gbtc
//
//  Copyright © 2016, Grid Protection Alliance.  All Rights Reserved.
//
//  Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
//  the NOTICE file distributed with this work for additional information regarding copyright ownership.
//  The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
//  file except in compliance with the License. You may obtain a copy of the License at:
//
//      http://opensource.org/licenses/MIT
//
//  Unless agreed to in writing, the subject software distributed under the License is distributed on an
//  "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
//  License for the specific language governing permissions and limitations.
//
//  Code Modification History:
//  ----------------------------------------------------------------------------------------------------
//  02/27/2016 - Ritchie Carroll
//       Generated original version of source code.
//
//*****************************************************************************************************@
@using GSF.Web.Model
@using PQDashboard.Model
@model AppModel
@{
    DataContext dataContext = Model.DataContext;

    ViewBag.HeaderColumns = new[]
    {   //    { "Field", "Label", "Classes" }
        new[] { "ID", "ID", "text-center" },
        new[] { "Name", "&nbsp;&nbsp;&nbsp;Name", "text-left" },
        new[] { "Description", "Description", "text-left" },
        new[] { null, "Menu&nbsp;Items", "text-center" }
    };

    ViewBag.CustomTitle = "Edit System Menus";
    ViewBag.Title = "System Menu";
    ViewBag.BodyRows = BodyRows().ToString();
    ViewBag.AddNewEditDialog = AddNewEditDialog(dataContext).ToString();
}
@helper BodyRows()
{
    <td width="10%" data-bind="text: ID" class="text-center valign-middle" nowrap></td>
    <td width="30%" class="text-left valign-middle" nowrap><button type="button" class="btn btn-link" data-bind="text: Name, click: $parent.viewPageRecord"></button></td>
    <td width="50%" class="text-left table-cell-hard-wrap"><div data-bind="text: $($element.parentElement).truncateToWidth(Description, 1.5), attr: {title: Description}"></div></td>
    <td width="5%" class="text-center valign-middle"><button type="button" class="btn btn-default btn-sm" data-bind="click: openMenuItemEditor.bind($data), enable: $parent.dataHubIsConnected"><span data-bind="attr: {id: 'menuItemMode' + ID}">Edit</span>&nbsp;&nbsp;<span class="badge" data-bind="text: getMenuItemCount(ID, $($element)), attr: {id: 'menuItemCount' + ID}">0</span></button></td>
    <td width="5%" class="text-center valign-middle" nowrap>
        <button type="button" class="btn btn-xs" data-bind="click: $parent.editPageRecord, enable: $parent.dataHubIsConnected"><span class="glyphicon glyphicon-pencil"></span></button>
        <button type="button" class="btn btn-xs" data-bind="click: $parent.removePageRecord, enable: $parent.dataHubIsConnected"><span class="glyphicon glyphicon-remove"></span></button>
    </td>
}
@helper AddNewEditDialog(DataContext dataContext)
{
    <div class="col-md-12">
        @Html.Raw(dataContext.AddInputField<Menu>("ID"))
        @Html.Raw(dataContext.AddInputField<Menu>("Name"))
        @Html.Raw(dataContext.AddInputField<Menu>("Abbreviation"))
        @Html.Raw(dataContext.AddTextAreaField<Menu>("Description"))
    </div>
}
@Html.Partial("PagedViewModel")
<div id="editMenuItemDialog" class="modal modal-wide fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <iframe style="border: none" id="editMenuItemFrame"></iframe>
                <button type="button" class="btn btn-default pull-right popup-ok-button" data-dismiss="modal">OK</button>
            </div>
        </div>
    </div>
</div>
@section Scripts {
    <script>
        @Html.Raw(Model.RenderViewModelConfiguration<Menu>(ViewBag))

        function getMenuItemCount(pageID, element) {
            if (viewModel.dataHubIsConnected()) {
                dataHub.queryMenuItemCount(pageID, null).done(function (count) {
                    const menuItemMode = $("#menuItemMode" + pageID);
                    const menuItemCount = $("#menuItemCount" + pageID);
                    const modeText = count > 0 ? "Edit" : "Add";

                    if (menuItemMode.text() !== modeText)
                        menuItemMode.text(modeText);

                    if (menuItemCount.text() !== count.toString())
                        menuItemCount.text(count.toString());
                });
            }

            return element.text();
        }

        $(window).resize(function () {
            setTimeout(function () {
                $("#editMenuItemFrame").attr("height", ($(document).height() - 150) + "px");
            }, 500);

        });

        function openMenuItemEditor(record) {
            $("#editMenuItemFrame").attr({
                "src": "@Url.Content("~/System/MenuItems")?ID=" + record.ID + "&Name=" + encodeURIComponent(record.Name),
                "height": ($(document).height() - 150) + "px",
                "width": "100%"
            });

            $("#editMenuItemDialog").modal("show");
        }

        $("#editMenuItemDialog").on("hidden.bs.modal", function () {
            // Refresh page counts after editing tasks
            viewModel.queryPageRecords();

            // Clear frame page
            $("#editMenuItemFrame").attr("src", "about:blank");
        });

        $(function() {
            $("#editMenuItemDialog").modal({ show: false, backdrop: "static", keyboard: false });
        });
    </script>
}